<template>
  <div id="page-index" class="container">
    <div class="wrapper">
      <section class="search-content">
        <div class="logo">
          <!--<a href="http://www.caigou2003.com" target="_blank">
                        <img src="../assets/img/index_logo.png" alt="政府采购信息网">
                    </a>-->
          <img src="../assets/img/public_logo.png" alt="政府采购信息网"/>
        </div>
        <div class="input-search-wrap">
          <i class="icon-search"></i>
          <input
            id="input-search"
            class="input-search"
            type="text"
            name="content"
            placeholder="请输入您要查询的信息"
            v-model="inputSearch"
            @blur="inputSearchBlur"
            autocomplete="off"
            @click="clickInputSearch"
            ref="input-search"
            @keyup.enter="enterSearchResult"
            @keyup="inputKeyup"
          />
          <span @click="enterSearchResult">搜索标题</span>
          <span @click="enterSearchResult($event, 2)">搜索全文</span>

          <ul
            id="query-search"
            v-if="activeSearchHistory.length > 0 && searchHistoryShow"
          >
            <li
              v-for="(item, index) in activeSearchHistory"
              :key="item.key"
              :class="{ active: index == searchHistoryIndex }"
              @mousedown="searchHistoryClick(item.text)"
              @mouseover="searchHistoryMouseover(index)"
            >
              {{ item.text }}
            </li>
            <li style="text-align: right" @click="clearRecord">清除记录</li>
          </ul>
          <!--<div class="hotLink">
            <p class="hotTitle">热门搜索</p>
            <a :href="item.url" v-for="item in hotLink" :key="item">{{
              item.title
            }}</a>
          </div>-->
        </div>
      </section>
      <footer class="footer">
        <span>北京正福易采通科技有限公司</span>
        <span>版权所有</span>
      </footer>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      inputSearch: "",
      searchHistoryShow: false,
      searchHistory: [],
      searchHistoryIndex: -1,
      hotLink: [
        {
          title: "银行",
          url: "/search?keyword=银行&method=1",
        },
        {
          title: "数据库",
          url: "/search?keyword=数据库&method=1",
        },
        {
          title: "系统",
          url: "/search?keyword=系统&method=1",
        },
        {
          title: "费雪派克",
          url: "/search?keyword=费雪派克&method=1",
        },
        {
          title: "北京航空航天大学杭州创新研究院",
          url: "/search?keyword=北京航空航天大学杭州创新研究院&method=1",
        },
        {
          title: "办公家具",
          url: "/search?keyword=办公家具&method=1",
        },
        {
          title: "交换机",
          url: "/search?keyword=交换机&method=1",
        },
        {
          title: "图书馆家具",
          url: "/search?keyword=图书馆家具&method=1",
        },
        {
          title: "测序仪",
          url: "/search?keyword=测序仪&method=1",
        },
        {
          title: "新开办企业刻章服务项目",
          url: "/search?keyword=新开办企业刻章服务项目&method=1",
        },
        {
          title: "床",
          url: "/search?keyword=床&method=1",
        },
        {
          title: "消防",
          url: "/search?keyword=消防&method=1",
        },
        {
          title: "内窥镜手术控制系统",
          url: "/search?keyword=内窥镜手术控制系统&method=1",
        },
        {
          title: "仙桃市",
          url: "/search?keyword=仙桃市&method=1",
        },
        {
          title: "采购意向 医院",
          url: "/search?keyword=采购意向 医院&method=1",
        },
        {
          title: "桌",
          url: "/search?keyword=桌&method=1",
        },
        {
          title: "心理",
          url: "/search?keyword=心理&method=1",
        },
        {
          title: "山西博物院",
          url: "/search?keyword=山西博物院&method=1",
        },
        {
          title: "标牌",
          url: "/search?keyword=标牌&method=1",
        },
      ],
    };
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      console.log(this.$store.state);
    }, 100);
    this.$refs["input-search"].focus();
    // console.log(localStorage.getItem('searchHistory'));
    this.searchHistory = JSON.parse(localStorage.getItem("searchHistory"))
      ? JSON.parse(localStorage.getItem("searchHistory"))
      : [];
  },
  destroyed() {
    // console.log('destroyed')
  },
  watch: {
    inputSearch(newVal) {
      let inputMaxLength = 164;
      if (newVal.length > inputMaxLength) {
        this.inputSearch = newVal.substr(0, inputMaxLength);
      }
    },
  },
  computed: {
    activeSearchHistory() {
      return this.searchHistory.slice(0, 10);
    },
  },
  methods: {
    inputKeyup(e) {
      console.log(e);
      if (e.keyCode == 40) {
        // console.log('按下了');
        if (this.searchHistoryIndex + 1 < this.searchHistory.length) {
          this.searchHistoryIndex += 1;
        } else {
          this.searchHistoryIndex = 0;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;
      } else if (e.keyCode == 38) {
        // console.log('按上了');
        if (this.searchHistoryIndex > 0) {
          this.searchHistoryIndex -= 1;
        } else {
          this.searchHistoryIndex = this.searchHistory.length - 1;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;
      }
    },
    clickInputSearch() {
      this.searchHistoryShow = true;
    },
    inputSearchBlur() {
      setTimeout(() => {
        this.searchHistoryShow = false;
      }, 500)
      // this.enterSearchResult();
    },
    searchHistoryMouseover(index) {
      this.searchHistoryIndex = index;
    },
    searchHistoryClick(text) {
      this.inputSearch = text;
      this.enterSearchResult();
    },
    // 清除历史记录
    clearRecord() {
      localStorage.setItem('searchHistory', '[]')
      this.searchHistory = []
    },
    enterSearchResult(e, method = 1) {
      this.searchHistory = this.searchHistory.filter((item) => {
        return item.text !== this.inputSearch;
      });
      this.searchHistory.unshift({
        key: this.utils.getTimestamp(),
        text: this.inputSearch,
      });

      localStorage.setItem(
        "searchHistory",
        JSON.stringify(this.searchHistory.slice(0, 100))
      );
      this.$router.push({
        name: "search-type",
        query: {
          keyword: this.inputSearch.trim().substr(0, 38),
          method,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .height();
  .min-height(550px) !important;
  .bg("@{img-base-url}index_back-color.png", repeat-x, center, 10px 100%);
  background-image: linear-gradient(#f8a635, #f67b14);

  .wrapper {
    .size();
    .bg("@{img-base-url}index_back-img.png", no-repeat, center, 1880px 922px);
    position: relative;

    .search-content {
      position: absolute;
      top: 26%;
      left: 50%;
      transform: translate(-50%, 0);
      .layout-page(570px);
      z-index: 2;

      .logo {
        .size(203px, 50px);
        .center(auto-x);

        & img {
          .size();
        }
      }

      .input-search-wrap {
        .size(100%, 50px);
        margin-top: 54px;
        border: 1px solid #ffffff;
        .border-radius(25px);
        .fz(16px);
        .color(#ffffff);
        //overflow: hidden;
        position: relative;

        .icon-search {
          display: inline-block;
          .size(16px);
          /*background: url("../assets/img/index_icon-search.png");*/
          .bg("@{img-base-url}index_icon-search.png");
          margin-left: 19px;
          vertical-align: middle;
        }

        input {
          .size(355px);
          background-color: transparent;
          border: none;
          outline: none;
          padding-left: 8px;
          box-sizing: border-box;
          .fz(16px);
          .color(inherit);
          .beauty-placeholder(custom, color, #F3D1B4);
          .beauty-placeholder(custom, font-size, 16px);
        }

        & span {
          margin-left: 13px;
          text-decoration: underline;
          cursor: pointer;
        }

        #query-search {
          .size(530px, auto);
          position: absolute;
          left: 20px;
          top: 50px;
          background-color: #f78119;
          border: 1px solid #ffffff;
          border-top: none;

          & > li {
            line-height: 25px;
            .fz(14px);
            .ellipsis;
            padding: 0 10px;
            cursor: pointer;

            &.active {
              background-color: #f7982b;
            }
          }
        }

        .hotLink {
          margin-top: 20px;

          .hotTitle {
            font-size: 18px;
            margin-bottom: 10px;
          }

          a {
            margin: 6px;
            display: inline-block;
          }
        }
      }
    }

    .footer {
      .width(100%);
      .center(text-x);
      .fz(16px);
      .color(#fee1c9);
      position: absolute;
      bottom: 27px;
      z-index: 1;

      & > span:last-child {
        margin-left: 18px;
      }
    }
  }
}
</style>
